<template>
  <div>
    <div class="section-header text-center section-header--dark">
      <h2>我们最受认可的学员作品</h2>
      <!-- <p class="style4">
        Minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.
        duis enim velit mollit. Exercitation veniam consequat.
      </p> -->
    </div>
    <SwiperSlide
      :dataList="courses"
      :breakpoints="breakpoints"
      :loop="true"
      :pagination="pagination"
    >
      <template #content="{ item }">
        <CourseCard :courseDetails="item" />
      </template>
      <template v-slot:pagination>
                <div class="slider__pagination-1 mt-5 py-2 text-center"></div>
      </template>
    </SwiperSlide>
  </div>
</template>

<script>
import SwiperSlide from "@/components/base/slots/SwiperSlide.vue";
import CourseCard from "@/components/partials/CourseCard.vue";
export default {
  components: { CourseCard, SwiperSlide },
  props: {
    courses: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      breakpoints: {
        576: {
          slidesPerView: 1,
        },
        768: {
          slidesPerView: 2,
        },
        992: {
          slidesPerView: 3,
          spaceBetween: 15,
        },
        1200: {
          slidesPerView: 3,
          spaceBetween: 25,
        },
        1400: {
          slidesPerView: 4,
          spaceBetween: 20,
        },
        1600: {
          slidesPerView: 5,
          spaceBetween: 20,
        },
      },
      pagination: {
                el: ".slider__pagination-1",
                clickable: true
            },
    };
  },
};
</script>